import { useState } from 'react';
import Divider from "../../divider"
import Typography from "../../typography"
import Grid from '../index';
const Row = Grid.Row;
const Col = Grid.Col;
import "./index.less";

const App = () => {
    return (
        <div style={{ width: '100%' }} className='grid-demo-background'>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col span={24}>
                    <div>24 - 100%</div>
                </Col>
            </Row>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col span={12}>
                    <div>12 - 50%</div>
                </Col>
                <Col span={12}>
                    <div>12 - 50%</div>
                </Col>
            </Row>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col span={8}>
                    <div>8 - 33.33%</div>
                </Col>
                <Col span={8}>
                    <div>8 - 33.33%</div>
                </Col>
                <Col span={8}>
                    <div>8 - 33.33%</div>
                </Col>
            </Row>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col span={6}>
                    <div>6 - 25%</div>
                </Col>
                <Col span={6}>
                    <div>6 - 25%</div>
                </Col>
                <Col span={6}>
                    <div>6 - 25%</div>
                </Col>
                <Col span={6}>
                    <div>6 - 25%</div>
                </Col>
            </Row>
            <Row className='grid-demo'>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
                <Col span={4}>
                    <div>4 - 16.66%</div>
                </Col>
            </Row>
        </div>
    );
};

const App2 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Row
                className='grid-demo'
                style={{ marginBottom: 16, backgroundColor: 'var(--color-fill-2)' }}
            >
                <Col span={8}>col - 8</Col>
                <Col span={8} offset={8}>
                    col - 8 | offset - 8
                </Col>
            </Row>
            <Row
                className='grid-demo'
                style={{ marginBottom: 16, backgroundColor: 'var(--color-fill-2)' }}
            >
                <Col span={6} offset={8}>
                    col - 6 | offset - 8
                </Col>
                <Col span={6} offset={4}>
                    col - 6 | offset - 4
                </Col>
            </Row>
            <Row className='grid-demo' style={{ backgroundColor: 'var(--color-fill-2)' }}>
                <Col span={12} offset={8}>
                    col - 12 | offset - 8
                </Col>
            </Row>
        </div>
    );
};

const App3 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Row
                className='grid-demo'
                style={{ marginBottom: 16, backgroundColor: 'var(--color-fill-2)' }}
            >
                <Col span={8} push={16}>
                    col - 8 | push - 16
                </Col>
                <Col span={16} pull={8}>
                    col - 16 | pull - 8
                </Col>
            </Row>
        </div>
    );
};
const App4 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Divider orientation='left'>Horizontal</Divider>
            <Row className='grid-gutter-demo' gutter={24}>
                <Col span={12}>
                    <div>col - 12</div>
                </Col>
                <Col span={12}>
                    <div>col - 12</div>
                </Col>
            </Row>
            <Divider orientation='left'>Responsive</Divider>
            <Row className='grid-gutter-demo' gutter={{ md: 8, lg: 24, xl: 32 }}>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
            </Row>
            <Divider orientation='left'>Horizontal and Vertical</Divider>
            <Row className='grid-gutter-demo' gutter={[24, 12]}>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
                <Col span={6}>
                    <div>col - 6</div>
                </Col>
            </Row>
        </div>
    );
};

const rowStyle = {
    marginBottom: 40,
    background: 'var(--color-fill-2)',
};
const titleStyle = {
    fontSize: 12,
    color: '#141f33',
};

const App5 = () => {
    return (
        <div style={{ width: '100%' }}>
            <p style={titleStyle}>
                <Typography.Text>容器左排列</Typography.Text>
            </p>
            <Row className='grid-demo' justify='start' style={rowStyle}>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>容器居中排列</Typography.Text>
            </p>
            <Row className='grid-demo' justify='center' style={rowStyle}>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>容器右排列</Typography.Text>
            </p>
            <Row className='grid-demo' justify='end' style={rowStyle}>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>容器分散排列</Typography.Text>
            </p>
            <Row className='grid-demo' justify='space-around' style={rowStyle}>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>容器等距排列</Typography.Text>
            </p>
            <Row className='grid-demo' justify='space-between' style={rowStyle}>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
                <Col span={4}>
                    <div>col - 4</div>
                </Col>
            </Row>
        </div>
    );
};
const App6 = () => {
    return (
        <div style={{ width: '100%' }}>
            <p style={titleStyle}>
                <Typography.Text>垂直顶部对齐</Typography.Text>
            </p>
            <Row className='grid-demo' align='start' style={rowStyle}>
                <Col span={6} style={{ height: 90, lineHeight: '90px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 48, lineHeight: '48px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 120, lineHeight: '120px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 60, lineHeight: '60px' }}>
                    <div>col - 6</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>垂直居中对齐</Typography.Text>
            </p>
            <Row className='grid-demo' align='center' style={rowStyle}>
                <Col span={6} style={{ height: 90, lineHeight: '90px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 48, lineHeight: '48px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 120, lineHeight: '120px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 60, lineHeight: '60px' }}>
                    <div>col - 6</div>
                </Col>
            </Row>
            <p style={titleStyle}>
                <Typography.Text>垂直底部对齐</Typography.Text>
            </p>
            <Row className='grid-demo' align='end' style={rowStyle}>
                <Col span={6} style={{ height: 90, lineHeight: '90px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 48, lineHeight: '48px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 120, lineHeight: '120px' }}>
                    <div>col - 6</div>
                </Col>
                <Col span={6} style={{ height: 60, lineHeight: '60px' }}>
                    <div>col - 6</div>
                </Col>
            </Row>
        </div>
    );
};

const App7 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Row className='grid-demo'>
                <Col span={6} order={4}>
                    <div>1 col-order-4</div>
                </Col>
                <Col span={6} order={3}>
                    <div>2 col-order-3</div>
                </Col>
                <Col span={6} order={2}>
                    <div>3 col-order-2</div>
                </Col>
                <Col span={6} order={1}>
                    <div>4 col-order-1</div>
                </Col>
            </Row>
        </div>
    );
};

const App8 = () => {
    return (
        <Row className='grid-demo'>
            <Col xs={2} sm={4} md={6} lg={8} xl={10} xxl={8}>
                Col
            </Col>
            <Col xs={20} sm={16} md={12} lg={8} xl={4} xxl={8}>
                Col
            </Col>
            <Col xs={2} sm={4} md={6} lg={8} xl={10} xxl={8}>
                Col
            </Col>
        </Row>
    );
};
const App9 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Row className='grid-demo'>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    Col
                </Col>
                <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    Col
                </Col>
                <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                    Col
                </Col>
            </Row>
        </div>
    );
};

const App10 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col flex='100px'>
                    <div>100px</div>
                </Col>
                <Col flex='auto'>
                    <div>auto</div>
                </Col>
            </Row>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col flex='100px'>
                    <div>100px</div>
                </Col>
                <Col flex='auto'>
                    <div>auto</div>
                </Col>
                <Col flex='100px'>
                    <div>100px</div>
                </Col>
            </Row>
            <Row className='grid-demo' style={{ marginBottom: 16 }}>
                <Col flex={3}>
                    <div>3 / 12</div>
                </Col>
                <Col flex={4}>
                    <div>4 / 12</div>
                </Col>
                <Col flex={5}>
                    <div>5 / 12</div>
                </Col>
            </Row>
        </div>
    );
};


const { GridItem } = Grid;

const App11 = () => {
    const [collapsed, setCollapsed] = useState(false);
    return (
        <div style={{ width: '100%' }}>
            <div style={{ marginBottom: '20px' }}>
                <Typography.Text>折叠：</Typography.Text>
            </div>
            <Grid collapsed={collapsed} cols={3} colGap={12} rowGap={16} className='grid-demo-grid'>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item' offset={1}>item | offset - 1</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item' span={3}>item | span - 3</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item' suffix>{
                    ({ overflow }) => `suffix | overflow: ${!!overflow}`
                }</GridItem>
            </Grid>
        </div>
    );
};



const App12 = () => {
    return (
        <div style={{ width: '100%' }}>
            <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16} className='grid-responsive-demo'>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item'>item</GridItem>
                <GridItem className='demo-item' span={{ xl: 4, xxl: 6 }} suffix>
                    suffix
                </GridItem>
            </Grid>
        </div>
    );
};



export default App11;
